import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_svg/svg.dart';

// ------------------------------------------------------------------------------------- //
import 'package:pacsun/provider/themeProv.dart' show ThemeModeProvider;

// ------------------------------------------------------------------------------------- //
import 'package:pacsun/view/task/theme/app_colors.dart';
// ------------------------------------------------------------------------------------- //

import '../../provider/userProv.dart' show UserProvider;

// ------------------------------------------------------------------------------------- //
import '../create/mediaPicker/mediaPickerPage.dart';

class CreateInspiration extends StatelessWidget {
  const CreateInspiration({super.key});

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        // Inspiration Title
        Selector<ThemeModeProvider, ThemeMode>(
          selector: (context, themeModeProv) => themeModeProv.themeMode,
          builder: (context, themeMode, child) {
            return Padding(
              padding: EdgeInsets.symmetric(horizontal: 16.w, vertical: 16.h),
              child: Text(
                'INSPIRATION',
                style: TextStyle(
                  fontFamily: 'Poppins',
                  fontWeight: FontWeight.w700,
                  fontSize: 20.sp,
                  letterSpacing: 0,
                  height: 20 / 30,
                  color: themeMode == ThemeMode.light
                      ? Colors.black
                      : Colors.white,
                ),
              ),
            );
          },
        ),

        // Inspiration Cards Grid
        const InspirationCard()
      ],
    );
  }
}

const List<Map<String, dynamic>> inspirations = [
  {
    'url': 'assets/imgs/img_inspriation1.png',
    'likes': '15K',
    'text': 'Taking on beach days in our hawaii erica bikini',
    'isLiked': false,
  },
  {
    'url': 'assets/imgs/img_inspriation2.png',
    'likes': '23K',
    'text': 'Cleaning Time is a Fashion show',
    'isLiked': true,
  },
  {
    'url': 'assets/imgs/img_inspriation3.png',
    'likes': '31K',
    'text': 'Taking on beach days in our hawaii erica bikini',
    'isLiked': true,
  },
  {
    'url': 'assets/imgs/img_inspriation4.png',
    'likes': '2.0K',
    'text': 'Cleaning Time is a Fashion show',
    'isLiked': false,
  },
];

class BorderContainer extends StatelessWidget {
  final double width;
  final double height;
  final Widget child;

  const BorderContainer({
    super.key,
    required this.width,
    required this.height,
    required this.child,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      width: width,
      height: height,
      decoration: BoxDecoration(
        color: Color(0XFF4F4F4F).withOpacity(0.2),
        borderRadius: BorderRadius.circular(12).r,
        border: Border.all(
          width: 0.5.w,
          color: Color(0XFF4e4e4e),
        ),
      ),
      alignment: Alignment.center,
      child: child,
    );
  }
}

class LikeIcon extends StatelessWidget {
  const LikeIcon({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 56.w,
      height: 19.h,
      alignment: Alignment.center,
      decoration: BoxDecoration(
          color: AppColors.containerBg.withAlpha(104),
          borderRadius: BorderRadius.circular(10).r),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          SvgPicture.asset(
            'assets/icons/icon_like.svg',
            width: 13.w,
            height: 13.h,
          ),
          SizedBox(width: 5.w),
          Text(
            '15K',
            style: customTextStyle(fontWeight: 600),
          )
        ],
      ),
    );
  }
}

class InspirationCard extends StatelessWidget {
  const InspirationCard({super.key});

  @override
  Widget build(BuildContext context) {
    final userProv = context.read<UserProvider>();
    bool isCraete = userProv.isCreate;
    return GridView.builder(
      padding: EdgeInsets.symmetric(horizontal: 16.w),
      shrinkWrap: true,
      physics: const NeverScrollableScrollPhysics(),
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
        crossAxisSpacing: 12.w,
        mainAxisSpacing: 12.h,
        childAspectRatio: 164.w / 282.h, // Your card's aspect ratio
      ),
      itemCount: inspirations.length,
      itemBuilder: (context, index) {
        final inspiration = inspirations[index];
        return InspirationCardItem(
          imageUrl: inspiration['url'],
          text: inspiration['text'],
          likes: inspiration['likes'],
          isLiked: inspiration['isLiked'],
          onLikePressed: () {
            // Handle like button press here
            // You might want to use a state management solution
            // to update the isLiked status
          },
        );
      },
    );
  }
}

class InspirationCardItem extends StatelessWidget {
  final String imageUrl;
  final String text;
  final String likes;
  final bool isLiked;
  final VoidCallback? onLikePressed;

  const InspirationCardItem({
    super.key,
    required this.imageUrl,
    required this.text,
    this.likes = '0',
    this.isLiked = false,
    this.onLikePressed,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 164.w,
      height: 282.h,
      decoration: BoxDecoration(
        color: const Color.fromRGBO(34, 34, 34, 1),
        borderRadius: BorderRadius.circular(8.r),
      ),
      child: Column(
        // crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          // Image part (top)
          Stack(
            children: [
              Container(
                width: 164.w,
                height: 178.h,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(8.r),
                    topRight: Radius.circular(8.r),
                  ),
                  image: DecorationImage(
                      image: AssetImage(imageUrl), fit: BoxFit.cover),
                ),
              ),
              // Like button positioned at bottom-left of image
              Positioned(
                left: 8.w,
                bottom: 8.h,
                child: GestureDetector(
                  onTap: () {},
                  child: Container(
                    width: 60.w,
                    height: 19.h,
                    decoration: BoxDecoration(
                      color: const Color.fromRGBO(4, 4, 4, 0.4),
                      borderRadius: BorderRadius.circular(9.5.r),
                    ),
                    padding: EdgeInsets.symmetric(horizontal: 6.w),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Icon(
                          isLiked ? Icons.favorite : Icons.favorite_border,
                          size: 13.sp,
                          color: isLiked ? Colors.red : Colors.white,
                        ),
                        SizedBox(width: 4.w),
                        Text(
                          likes.toString(),
                          style: TextStyle(
                            fontFamily: 'Gilroy-Bold',
                            fontWeight: FontWeight.w400,
                            fontSize: 12.sp,
                            height: 1.0,
                            letterSpacing: 0,
                            color: Colors.white,
                          ),
                          textScaler: TextScaler.noScaling,
                        ),
                      ],
                    ),
                  ),
                ),
              ),
            ],
          ),

          Container(
            padding: EdgeInsets.only(top: 3, left: 10, right: 10, bottom: 10).r,
            height: 94.h,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text(
                  'Taking on beach days in our hawaiihawaiihawaiihawaii ',
                  style: customTextStyle(
                    fontSize: 14,
                    height: 1.6,
                    overflow: TextOverflow.ellipsis,
                  ),
                  maxLines: 2,
                  textScaler: TextScaler.noScaling,
                ),
                Spacer(),
                // SizedBox(height: 20.h),
                Row(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    GestureDetector(
                      onTap: () {
                        ///TODO 收藏
                      },
                      child: BorderContainer(
                        width: 48.w,
                        height: 24.h,
                        child: SvgPicture.asset(
                          'assets/icons/icon_start.svg',
                          width: 16.w,
                          height: 16.h,
                        ),
                      ),
                    ),
                    SizedBox(width: 6.w),

                    /// TRY
                    GestureDetector(
                      onTap: () {
                        /// todo 分享
                      },
                      child: BorderContainer(
                        width: 90.w,
                        height: 24.h,
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            Text(
                              'TRY',
                              style: customTextStyle(fontWeight: 700),
                              textScaler: TextScaler.noScaling,
                            ),
                            SizedBox(width: 4.w),
                            SvgPicture.asset(
                              'assets/icons/icon_right_arrow.svg',
                              width: 16.w,
                              height: 16.h,
                            ),
                          ],
                        ),
                      ),
                    )
                  ],
                )
              ],
            ),
          ),
        ],
      ),
    );
  }
}
